{% extends theme_path('admin/base.html') %}

{% block title %}{{ '编辑文章' if article else '创建文章' }}{% endblock %}

{% block content %}
<div class="p-6">
    <div class="bg-white rounded-lg shadow-sm">
        <!-- 标题栏 -->
        <div class="px-6 py-4 border-b">
            <div class="flex flex-col lg:flex-row justify-between items-stretch lg:items-center space-y-4 lg:space-y-0">
                <h2 class="text-xl font-bold">{{ '编辑文章' if article else '撰写文章' }}</h2>
                {% if article %}
                <div class="flex items-center space-x-4">
                    <a href="{{ ArticleUrlGenerator.generate(article.id, article.category_id, article.created_at) }}"
                       target="_blank" 
                       class="text-blue-600 hover:text-blue-700">
                        查看文章
                    </a>
                    <a href="{{ url_for('admin.articles') }}"
                       class="text-gray-600 hover:text-gray-900">
                        返回列表
                    </a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 表单内容 -->
        <div class="p-6">
            <form method="post" class="grid grid-cols-1 lg:grid-cols-3 gap-6" id="articleForm" onsubmit="return validateForm()">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                
                <!-- 左侧主要内容区域 -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- 标题输入 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            标题
                        </label>
                        <input type="text" name="title" required
                               value="{{ article.title or '' }}"
                               class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                      focus:outline-none focus:ring-2 focus:ring-blue-500 
                                      bg-white dark:bg-gray-700 
                                      text-gray-900 dark:text-white">
                    </div>

                    <!-- URL 别名 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            URL 别名
                        </label>
                        <input type="text" name="slug" 
                               value="{{ article.slug or '' }}"
                               placeholder="自定义文章URL,留空将使用默认规则"
                               class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                      focus:outline-none focus:ring-2 focus:ring-blue-500 
                                      bg-white dark:bg-gray-700 
                                      text-gray-900 dark:text-white">
                        <p class="mt-1 text-sm text-gray-500">
                            仅允许字母、数字、中划线和下划线,用于生成更友好的URL
                        </p>
                    </div>

                    <!-- 内容编辑器 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            内容
                        </label>
                        <textarea id="editor" name="content">{{ article.content or '' }}</textarea>
                    </div>

                    <!-- 在内容编辑器下方添加附件库按钮 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mt-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-white">附件库</h3>
                            <button type="button" onclick="showFileManager()"
                                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                                打开附件库
                            </button>
                        </div>
                    </div>

                    <!-- 在内容编辑器后面添加自定义字段部分 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mt-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">自定义字段</h3>
                            <button type="button" onclick="addCustomField()"
                                    class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded-lg 
                                           hover:bg-gray-50 dark:hover:bg-gray-700
                                           text-gray-700 dark:text-gray-300">
                                + 添加字段
                            </button>
                        </div>
                        
                        <div id="customFields" class="space-y-4">
                            <!-- 主题预定义字段 -->
                            {% if theme.article_fields %}
                                {% for field_key, field in theme.article_fields.items() %}
                                <div class="flex items-center space-x-4">
                                    <input type="text" name="field_keys[]" value="{{ field_key }}"
                                           placeholder="字段名" readonly
                                           class="w-1/3 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                                  bg-gray-50 dark:bg-gray-600
                                                  text-gray-900 dark:text-white">
                                    {% if field.type == 'image' %}
                                    <div class="flex-1 flex items-center space-x-2">
                                        <input type="text" name="field_values[]"
                                               value="{{ article.get_field(field_key) or '' if article else '' }}"
                                               placeholder="{{ field.description or '字段值' }}"
                                               class="flex-1 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg
                                                      focus:outline-none focus:ring-2 focus:ring-blue-500
                                                      bg-white dark:bg-gray-700
                                                      text-gray-900 dark:text-white">

                                    </div>
                                    {% else %}
                                    <input type="text" name="field_values[]"
                                           value="{{ article.get_field(field_key) or '' if article else '' }}"
                                           placeholder="{{ field.description or '字段值' }}"
                                           class="flex-1 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                                  focus:outline-none focus:ring-2 focus:ring-blue-500 
                                                  bg-white dark:bg-gray-700 
                                                  text-gray-900 dark:text-white">
                                    {% endif %}
                                </div>
                                {% endfor %}
                            {% endif %}

                            <!-- 自定义字段 -->
                            {% if article and article.fields %}
                                {% for key, value in article.fields.items() %}
                                    {% if not theme.article_fields or key not in theme.article_fields %}
                                    <div class="flex items-center space-x-4">
                                        <input type="text" name="field_keys[]" value="{{ key }}"
                                               placeholder="字段名"
                                               class="w-1/3 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                                      focus:outline-none focus:ring-2 focus:ring-blue-500 
                                                      bg-white dark:bg-gray-700 
                                                      text-gray-900 dark:text-white">
                                        <input type="text" name="field_values[]" value="{{ value }}"
                                               placeholder="字段值"
                                               class="flex-1 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                                      focus:outline-none focus:ring-2 focus:ring-blue-500 
                                                      bg-white dark:bg-gray-700 
                                                      text-gray-900 dark:text-white">
                                        <button type="button" onclick="removeCustomField(this)"
                                                class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path d="M6 18L18 6M6 6l12 12"></path>
                                            </svg>
                                        </button>
                                    </div>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- 右侧设置区域 -->
                <div class="space-y-6">
                    <!-- 发布时间 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            发布时间
                        </label>
                        <input type="datetime-local"
                               name="created_at"
                               value="{{ article.created_at.strftime('%Y-%m-%dT%H:%M') if article else '' }}"
                               class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg
                                      focus:outline-none focus:ring-2 focus:ring-blue-500
                                      bg-white dark:bg-gray-700
                                      text-gray-900 dark:text-white">
                        <p class="mt-1 text-xs text-gray-500">留空则使用当前时间</p>
                    </div>

                    <!-- 分类选择 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
                            分类
                        </label>
                        <div class="space-y-3 max-h-[400px] overflow-y-auto custom-scrollbar">
                            {% macro render_category_checkbox(category, level=0) %}
                            <div class="category-item flex items-center hover:bg-gray-50 dark:hover:bg-gray-700 p-2 rounded-lg transition-colors duration-200 {% if level > 0 %}ml-{{ level * 4 }}{% endif %}">
                                <div class="relative flex items-center">
                                    <input type="checkbox" 
                                           name="categories" 
                                           value="{{ category.id }}"
                                           id="category_{{ category.id }}"
                                           {% if article and category.id in article.categories|map(attribute='id') %}checked{% endif %}
                                           class="w-4 h-4 text-blue-600 border-gray-300 rounded 
                                                  focus:ring-blue-500 dark:focus:ring-blue-600
                                                  dark:bg-gray-600 dark:border-gray-500">
                                    <label for="category_{{ category.id }}" 
                                           class="ml-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                                        {{ category.name }}
                                        <span class="text-xs text-gray-500 dark:text-gray-400 ml-1">({{ category.article_count }})</span>
                                    </label>
                                </div>
                            </div>
                            {% if category._children %}
                                {% for child in category._children %}
                                    {{ render_category_checkbox(child, level + 1) }}
                                {% endfor %}
                            {% endif %}
                            {% endmacro %}

                            {% for category in categories %}
                                {{ render_category_checkbox(category) }}
                            {% endfor %}
                        </div>
                    </div>

                    <!-- 文章状态 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            文章状态
                        </label>
                        <select name="status" 
                                id="articleStatus"
                                onchange="togglePasswordField()"
                                class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                       focus:outline-none focus:ring-2 focus:ring-blue-500 
                                       bg-white dark:bg-gray-700 
                                       text-gray-900 dark:text-white">
                            <option value="public" {% if article and article.status == 'public' %}selected{% endif %}>公开</option>
                            <option value="hidden" {% if article and article.status == 'hidden' %}selected{% endif %}>隐藏</option>
                            <option value="password" {% if article and article.status == 'password' %}selected{% endif %}>密码保护</option>
                            <option value="private" {% if article and article.status == 'private' %}selected{% endif %}>私密</option>
                            <option value="draft" {% if article and article.status == 'draft' %}selected{% endif %}>草稿</option>
                            <option value="pending" {% if article and article.status == 'pending' %}selected{% endif %}>待审核</option>
                        </select>

                        <!-- 密码保护选项 -->
                        <div id="passwordField" class="mt-4 {% if not article or article.status != 'password' %}hidden{% endif %}">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                访问密码
                            </label>
                            <input type="password" 
                                   name="password" 
                                   value="{{ article.password or '' }}"
                                   placeholder="留空将使用默认密码: 123456"
                                   class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                          focus:outline-none focus:ring-2 focus:ring-blue-500 
                                          bg-white dark:bg-gray-700 
                                          text-gray-900 dark:text-white">
                        </div>
                    </div>

                    <!-- 标签设置 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            标签
                        </label>
                        <div class="relative">
                            <!-- 标签输入区域 -->
                            <div class="flex flex-wrap items-center gap-2 p-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg min-h-[42px]">
                                <div id="selected-tags" class="flex flex-wrap gap-2">
                                    {% if article %}
                                        {% for tag in article.tags %}
                                        <span class="tag-item inline-flex items-center px-2.5 py-1 bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 rounded-full text-sm">
                                            {{ tag.name }}
                                            <button type="button" onclick="removeTag(this)" class="ml-1.5 text-blue-600 hover:text-blue-800 dark:text-blue-400">
                                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                                </svg>
                                            </button>
                                        </span>
                                        {% endfor %}
                                    {% endif %}
                                </div>
                                <input type="text" 
                                       id="tag-input"
                                       placeholder="输入标签，按空格或回车添加"
                                       class="flex-1 min-w-[120px] bg-transparent border-0 outline-none focus:ring-0 text-gray-900 dark:text-gray-100">
                                <input type="hidden" name="tag_names" id="tag-names" value="{{ article.tags|map(attribute='name')|join(' ') if article else '' }}">
                            </div>
                            <!-- 标签建议下拉框 -->
                            <div id="tag-suggestions" class="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 hidden"></div>
                        </div>
                    </div>

                    <!-- 评论设置 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                        <div class="flex items-center">
                            <input type="checkbox" 
                                   name="allow_comment" 
                                   id="allowComment"
                                   {% if not article or article.allow_comment %}checked{% endif %}
                                   class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                            <label for="allowComment" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                                允许评论
                            </label>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="flex justify-end space-x-4">
                        <a href="{{ url_for('admin.articles') }}"
                           class="px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300">
                            取消
                        </a>
                        <button type="submit"
                                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                            {{ '保存修改' if article else '发布文章' }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 附件库模态框 -->
<div id="fileManagerModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-5xl max-h-[90vh] overflow-hidden">
            <!-- 模态框头部 -->
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">附件库</h3>
                <button onclick="hideFileManager()" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            
            <!-- iframe容器 -->
            <div id="fileManagerContainer" class="h-[calc(90vh-80px)]">
                <!-- iframe将在打开模态框时动态加载 -->
            </div>
        </div>
    </div>
</div>

<!-- 保留原有的 TinyMCE 和其他脚本 -->
{{ render_tinymce(selector='#editor', article_id=article.id if article else 0) }}

<!-- 添加自定义滚动条样式 -->
<style>
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.8);
}

/* 标签输入框样式 */
#tag-suggestions {
    max-height: 200px;
    overflow-y: auto;
}

#tag-suggestions .suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

#tag-suggestions .suggestion-item:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

.dark #tag-suggestions .suggestion-item:hover {
    background-color: rgba(59, 130, 246, 0.2);
}
</style>

<!-- 添加标签建议脚本 -->
<script>
const tagInput = document.getElementById('tag-input');
const selectedTags = document.getElementById('selected-tags');
const tagNames = document.getElementById('tag-names');
const tagSuggestions = document.getElementById('tag-suggestions');

let currentTags = new Set(tagNames.value.split(' ').filter(Boolean));

// 添加标签
function addTag(tagName) {
    tagName = tagName.trim();
    if (!tagName || currentTags.has(tagName)) return;
    
    currentTags.add(tagName);
    
    const tagElement = document.createElement('span');
    tagElement.className = 'tag-item inline-flex items-center px-2.5 py-1 bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 rounded-full text-sm';
    tagElement.innerHTML = `
        ${tagName}
        <button type="button" onclick="removeTag(this)" class="ml-1.5 text-blue-600 hover:text-blue-800 dark:text-blue-400">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    `;
    
    selectedTags.appendChild(tagElement);
    tagNames.value = Array.from(currentTags).join(' ');
    tagInput.value = '';
}

// 移除标签
function removeTag(button) {
    const tagItem = button.closest('.tag-item');
    const tagName = tagItem.textContent.trim();
    currentTags.delete(tagName);
    tagItem.remove();
    tagNames.value = Array.from(currentTags).join(' ');
}

// 处理标签输入
tagInput.addEventListener('keydown', function(e) {
    if (e.key === ' ' || e.key === 'Enter') {
        e.preventDefault();
        addTag(this.value);
    }
});

// 给输入框添加 blur 事件监听器，当失去焦点时调用 addTag 函数
tagInput.addEventListener('blur', function() {
    if(!tagSuggestions.contains(e.target)){
        addTag(this.value);
    }
});

// 获取标签建议
let debounceTimer;
tagInput.addEventListener('input', function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        const query = this.value.trim();
        if (query.length < 1) {
            tagSuggestions.innerHTML = '';
            tagSuggestions.classList.add('hidden');
            return;
        }
        
        fetch(`/tags/suggestions?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(suggestions => {
                if (suggestions.length === 0) {
                    tagSuggestions.classList.add('hidden');
                    return;
                }
                
                tagSuggestions.innerHTML = suggestions.map(tag => `
                    <div class="suggestion-item text-sm text-gray-700 dark:text-gray-300" onclick="addTag('${tag.name}')">
                        # ${tag.name}
                        <span class="text-xs text-gray-500 dark:text-gray-400">(${tag.count})</span>
                    </div>
                `).join('');
                
                tagSuggestions.classList.remove('hidden');
            });
    }, 300);
});

// 点击外部关闭标签建议
document.addEventListener('click', function(e) {
    if (!tagInput.contains(e.target) && !tagSuggestions.contains(e.target)) {
        tagSuggestions.classList.add('hidden');
    }
});
</script>

<script>
// 页面加载时检查状态
document.addEventListener('DOMContentLoaded', function() {
    togglePasswordField();
});

function togglePasswordField() {
    const status = document.getElementById('articleStatus').value;
    const passwordField = document.getElementById('passwordField');
    
    if (status === 'password') {
        passwordField.classList.remove('hidden');
    } else {
        passwordField.classList.add('hidden');
    }
}
</script>

<!-- 在页面底部添加验证脚本 -->
<script>
function validateForm() {
    // 先同步编辑器内容
    tinymce.triggerSave();
    
    // 检查分类选择
    const categories = document.querySelectorAll('input[name="categories"]:checked');
    if (categories.length === 0) {
        showAlert('请至少选择一个分类', 'error', '错误');
        document.querySelector('.custom-scrollbar').scrollIntoView({ behavior: 'smooth', block: 'center' });
        return false;
    }
    
    // 检查标题
    const title = document.querySelector('input[name="title"]').value.trim();
    if (!title) {
        showAlert('请填写文章标题', 'error', '错误');
        document.querySelector('input[name="title"]').focus();
        return false;
    }
    
    // 检查内容
    const content = tinymce.get('editor').getContent().trim();
    if (!content) {
        showAlert('请填写文章内容', 'error', '错误');
        tinymce.get('editor').focus();
        return false;
    }
    
    // 确保内容已经同步到表单
    document.querySelector('textarea[name="content"]').value = content;
    
    return true;
}

// 修改表单提交处理
document.getElementById('articleForm').onsubmit = function(e) {
    if (!validateForm()) {
        return false;
    }
    
    e.preventDefault();
    
    // 再次确保编辑器内容已同步
    tinymce.triggerSave();
    
    const formData = new FormData(this);
    
    // 获取自定义字段
    const fields = {};
    const keys = Array.from(this.querySelectorAll('input[name="field_keys[]"]'));
    const values = Array.from(this.querySelectorAll('input[name="field_values[]"]'));
    keys.forEach((key, index) => {
        if (key.value.trim()) {
            fields[key.value.trim()] = values[index].value;
        }
    });
    
    // 添加到表单数据
    formData.set('fields', JSON.stringify(fields));
    
    // 再次确保内容已经添加到表单数据
    formData.set('content', tinymce.get('editor').getContent());
    
    // 发送请求
    fetch(this.action, {
        method: 'POST',
        body: formData,
        headers: {
            'Accept': 'application/json'  // 添加这行,表明期望返回JSON
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('网络错误');
        }
        return response.json();
    })
    .then(data => {
        if (data.error) {
            showAlert(data.error, 'error', '错误');
        } else {
            showAlert(data.message, 'success', '成功');
            if (data.url) {
                setTimeout(() => location.href = data.url, 500);
            }
        }
    })
    .catch(error => {
        showAlert(error.message, 'error', '错误');
    });
    
    return false;
};

// 添加分类选择监听
document.querySelectorAll('input[name="categories"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const categories = document.querySelectorAll('input[name="categories"]:checked');
        if (categories.length === 0) {
            // 如果没有选中任何分类,显示提示
            showAlert('请至少选择一个分类', 'warning', '提示');
        }
    });
});
</script>


<!-- 在现有的 JavaScript 代码中添加字段操作函数 -->
<script>
function addCustomField() {
    const container = document.getElementById('customFields');
    const fieldDiv = document.createElement('div');
    fieldDiv.className = 'flex items-center space-x-4';
    fieldDiv.innerHTML = `
        <input type="text" name="field_keys[]"
               placeholder="字段名"
               class="w-1/3 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                      focus:outline-none focus:ring-2 focus:ring-blue-500 
                      bg-white dark:bg-gray-700 
                      text-gray-900 dark:text-white">
        <input type="text" name="field_values[]"
               placeholder="字段值"
               class="flex-1 px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                      focus:outline-none focus:ring-2 focus:ring-blue-500 
                      bg-white dark:bg-gray-700 
                      text-gray-900 dark:text-white">
        <button type="button" onclick="removeCustomField(this)"
                class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    `;
    container.appendChild(fieldDiv);
}

function removeCustomField(button) {
    button.closest('div').remove();
}


</script>

<script>
let fileManagerLoaded = false;

function showFileManager() {
    const modal = document.getElementById('fileManagerModal');
    const container = document.getElementById('fileManagerContainer');
    
    // 如果iframe还没加载过,则加载iframe
    if (!fileManagerLoaded) {
        container.innerHTML = `
            <iframe src="{{ url_for('admin.manage_files', mode='selector') }}" 
                    class="w-full h-full border-0"
                    id="fileManagerFrame"></iframe>
        `;
        fileManagerLoaded = true;
    }
    
    modal.classList.remove('hidden');
}

function hideFileManager() {
    const modal = document.getElementById('fileManagerModal');
    modal.classList.add('hidden');
}

// 监听来自iframe的消息
window.addEventListener('message', function(event) {
    if (event.data.type === 'fileSelected') {
        const file = event.data.file;
        const editor = tinymce.get('editor');
        
        // 直接使用传过来的content内容
        if (file.content) {
            editor.insertContent(file.content);
        } else {
            // 降级处理，以防content不存在
            if (file.file_type && file.file_type.startsWith('image/')) {
                editor.insertContent(`<img src="${file.url}" alt="${file.name}" style="max-width:100%;">`);
            } else if (file.file_type && file.file_type.startsWith('video/')) {
                editor.insertContent(`<video controls style="max-width:100%;"><source src="${file.url}" type="${file.file_type}">您的浏览器不支持视频标签</video>`);
            } else if (file.file_type && file.file_type.startsWith('audio/')) {
                editor.insertContent(`<audio controls><source src="${file.url}" type="${file.file_type}">您的浏览器不支持音频标签</audio>`);
            } else {
                editor.insertContent(`<a href="${file.url}" target="_blank">${file.name}</a>`);
            }
        }
        
        // 插入后关闭模态框
        hideFileManager();
    } else if (event.data.type === 'filesSelected') {
        // 处理多个文件
        const files = event.data.files;
        const editor = tinymce.get('editor');
        
        // 将所有文件的内容拼接起来插入编辑器
        const content = files.map(file => file.content).join('\n');
        editor.insertContent(content);
        
        // 插入后关闭模态框
        hideFileManager();
    }
});

// 点击模态框背景关闭
document.getElementById('fileManagerModal').addEventListener('click', function(e) {
    if (e.target === this) {
        hideFileManager();
    }
});
</script>
{% endblock %} 